<app-common-header [title]="'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.title'|translate" [routerUrl]="'/tabs/myAccount/setting/account-security/mobile-number'"></app-common-header>
<ion-content>
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="verifyMobile()">
    <ion-grid class="content_title">
      <ion-row >
        <ion-col size="12">
          <div class="content_title_top">
            {{'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.subTitle'|translate}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row class="mobile_input">
        <ion-col size="12">
          <ion-input type="text" clearInput="true" 
                     placeholder="{{'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.subTitle'|translate}}" 
                     formControlName="mobileNumber"></ion-input>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" *ngIf="mobileNumber.invalid && (mobileNumber.dirty || mobileNumber.touched)">
          <div *ngIf="mobileNumber.errors.required" class="form-error-item">
            {{'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.mobileNumber_required'|translate}}
          </div>
          <div *ngIf="mobileNumber.hasError('pattern')" class="form-error-item">
              {{'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.mobileNumber_format_error'|translate}}
            </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-button expand="full" fill="clear" class="customer-btn" type="submit" [disabled]='validateForm.invalid || loading'>
            {{'myAccount.setting.accountScurity.mobileNumberFunction.mobileNumberEditFunction.next'|translate}}
            <ion-spinner [hidden]="!loading"></ion-spinner>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>
